<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
    
        #ball{
        	width: 100px;
        	height: 100px;
        	background-color: gray;
        	position: absolute;
            border-radius: 50%;
            text-align: center;
            line-height: 80px;
        }
        #ball2{
        	width: 150px;
        	height: 150px;
        	background-color: yellow;
        	position: absolute;
        	top: 300px;
        	left: 300px;
        	border-radius: 50%;
   			text-align: center;
   			line-height: 140px;
        }
	</style>
</head>
<body>

    	<div id="ball">ball</div>

    	<div id="ball2">ball2</div>

</body>
	<script type="text/javascript">

		var ball = document.getElementById('ball');
		var ball2 = document.getElementById('ball2');

		ball.onmousedown = function(event){
			var x = event.clientX - ball.offsetLeft;
			var y = event.clientY - ball.offsetTop;

		    document.onmousemove = function(event){
		    	var _x = event.clientX;
		    	var _y = event.clientY;

		    	ball.style.left = _x -x + "px";
		    	ball.style.top = _y -y + "px";
                
                //斜边
		    	var c = ball.offsetWidth/2 + ball2.offsetWidth/2;
		    	
		    	//直角边
		    	var a = (ball.offsetLeft + ball.offsetWidth/2) - (ball2.offsetLeft + ball2.offsetWidth/2);
		    	var b = (ball.offsetTop + ball.offsetHeight/2) - (ball2.offsetTop + ball2.offsetHeight/2);

		    	if(c*c > a*a + b*b){

                    ball2.style.backgroundColor = 'red';

		    	}else{

		    		ball2.style.backgroundColor = 'yellow';
		    	}
		    }

		}

		document.onmouseup = function(){
			document.onmousemove = "";
		}
	</script>
</html>

















